<template lang='pug'>
  .page
    .pall-20
      .ivu-row.line-h-35.pall-10(v-for="(item, index) of routersList" :key="index" :style="index % 2 === 0 ? {background: '#fbfbfb'} : ''")
        .ivu-col.ivu-col-span-24
          span.text-gray-9.pr-10 name:
          |{{item.name}}
        .ivu-col.ivu-col-span-24
          span.text-gray-9.pr-10 title:
          |{{item.meta.title}}
        .ivu-col.ivu-col-span-24
          span.text-gray-9.pr-10 access:
          |{{item.meta.access}}
        .ivu-col.ivu-col-span-24
          p.text-gray-9 children:
          .pl-20.pr-20
            .ivu-row.pb-5.mb-5(v-for="(c_item, c_index) of item.children" :key="c_index" :class="c_index !== item.children.length - 1 ? 'border-b' : ''")
              .ivu-col.ivu-col-span-8
                span.text-gray-9.pr-10 name:
                |{{c_item.name}}
              .ivu-col.ivu-col-span-8
                span.text-gray-9.pr-10 title:
                |{{c_item.meta.title}}
              .ivu-col.ivu-col-span-8
                span.text-gray-9.pr-10 access:
                |{{c_item.meta.access}}
              .ivu-col.ivu-col-span-24
                p.text-gray-9 children:
                .pl-20.pr-20
                  .ivu-row.pb-5.mb-5(v-for="(s_item, s_index) of c_item.children" :key="s_index" :class="s_index !== c_item.children.length - 1 ? 'border-b-dashed' : ''")
                    .ivu-col.ivu-col-span-8
                      span.text-gray-9.pr-10 name:
                      |{{s_item.name}}
                    .ivu-col.ivu-col-span-8
                      span.text-gray-9.pr-10 title:
                      |{{s_item.meta.title}}
                    .ivu-col.ivu-col-span-8
                      span.text-gray-9.pr-10 access:
                      |{{s_item.meta.access}}

</template>

<script>
export default {
  data () {
    return {
      routersList: []
    }
  },

  mounted () {
    console.log('🌈', this.$router.options.routes)
    this.routersList = this.$router.options.routes
  },

  methods: {
  }
}
</script>

<style>

</style>
